<template>
  <div class="bg_colorff register" :style="{height:setHeight+'px'}">
    <p class="color_33 register-title">欢迎来到</p>
    <p class="color_33 register-title">阳光不锈微信商城</p>
    <!-- 表单区 -->
    <ul class="input-ul">
      <li class="input-item">
        <p class="font_size24 input-item-title font-bold">手机号码</p>
        <input
          type="number"
          placeholder="请输入手机号码"
          class="input-item-content font-bold"
          v-model="telNum"
        >
      </li>
      <li class="input-item">
        <p class="font_size24 input-item-title font-bold">验证码</p>
        <input
          type="number"
          placeholder="请输入验证码"
          class="input-item-content font-bold"
          v-model="codeNum"
        >
        <span class="vali-code color_0d font_size28 font-bold" @click="getCode">{{codeTip}}</span>
      </li>
    </ul>
    <!-- 提交按钮 -->
    <div class="color_ff font_size32 t_center register-btn" @click="registerSubmit">注册</div>
    <!-- 图片验证弹窗 -->
    <section class="shade" @click="closeShade" v-if="isShowShade">
      <div class="pic-code-box bg_colorff t_center">
        <p class="font_size28 color_33 font-bold">请填写图片上的验证码，验证通过后继续</p>
        <div class="flex input-img flex-pack-justify">
          <input type="text" v-model="picCodeNum" class="code-input p_l30" @click.stop>
          <div>
            <img :src="codeImgSrc" alt="" class="code-img" @click.stop>
            <span class="color_0d font_size28" @click.stop="changePicCode">看不清？换一张</span>
          </div>
        </div>
        <span class="confirm-btn font_size28 font-bold" @click.stop="testPicCode">确定</span>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  data() {
    return {
      setHeight: document.documentElement.clientHeight, //屏幕高度
      telNum: "", //电话号码
      codeNum: "", //验证码
      codeTip: "获取验证码", //获取验证码或者读秒
      picCodeNum: "", //图片验证码
      isShowShade: false, //是否显示弹出框
      isCanClick: true, //是否可以点击获取验证码，预防客户连续点击,true表示可以点击
      codeImgSrc: "" //图片验证码的链接
    };
  },

  methods: {
    //点击获取验证码
    getCode() {
      if (!this.isCanClick) {
        return;
      } else {
        let regTel = /^0?(13|14|15|18|17)[0-9]{9}$/gi;
        this.isCanClick = false;
        if (!this.telNum) {
          this.$toast("请输入手机号码");
        } else if (!regTel.test(this.telNum)) {
          this.$toast("请输入有效手机号码");
        } else {
          this.$util
            .get("login/sendCode", { type: 1, mobile: this.telNum })
            .then(res => {
              if (res.status == 2) {
                this.isShowShade = true;
                //获取图片验证信息
                this.getCodeImgFuc();
              } else {
                let second = 60;
                let timer = setInterval(() => {
                  if (second == 1) {
                    this.codeTip = "获取验证码";
                    clearInterval(timer);
                    this.isCanClick = true;
                  } else {
                    second--;
                    this.codeTip = `${second}S`;
                  }
                }, 1000);
              }
            });
        }
      }
    },
    //点击注册
    registerSubmit() {
      let regTel = /^0?(13|14|15|18|17)[0-9]{9}$/gi;
      let code = /^[0-9]{4}$/gi;
      if (!this.telNum) {
        this.$toast("请输入手机号码");
      } else if (!regTel.test(this.telNum)) {
        this.$toast("请输入有效手机号码");
      } else if (!this.codeNum) {
        this.$toast("请输入验证码");
      } else if (!code.test(this.codeNum)) {
        this.$toast("请输入有效验证码");
      } else {
        //提交表单
        this.$util
          .post("login/postRegister", {
            openid: this.$store.state.userinfo.openid,
            mobile: this.telNum,
            code: this.codeNum
          })
          .then(res => {
            this.$toast(res.message);
            if (res.status == 1) {
              this.$store.commit("setUserPhone", this.telNum);
              this.$route.go(-1)
              // location.reload();
            }
          });
      }
    },
    //点击关闭遮罩
    closeShade() {
      this.isShowShade = false;
    },
    //图片验证码校验
    testPicCode() {
      if (!this.picCodeNum) {
        this.$toast("请填写验证码");
      } else {
        this.$util
          .get("login/validateCode", {
            code: this.picCodeNum,
            mobile: this.telNum,
            type: 1
          })
          .then(res => {
            this.$toast(res.message);
            if (res.status == 1) {
              this.isShowShade = false;
              this.codeNum = res.data.code;
            }
          });
      }
    },
    //获取图片验证码
    getCodeImgFuc() {
      this.$util.get("login/pictureCodeHref").then(res => {
        this.codeImgSrc = res.data.url;
      });
    },
    //点击更换图片验证码
    changePicCode() {
      this.getCodeImgFuc();
    }
  }
};
</script>
<style lang='less' scoped>
@import url(../assets/css/register/register.less);
</style>
